<template>
	<view class="beijingse" style="padding-bottom: 150rpx;" v-if="pageShow">
		<!--  产品参数-->
		<u-popup :show="show" @close="close" :round="10">
			<view class="mainpadding">
				<view class="sanshier fonweight textcenter xiaohei">产品参数</view>
				<view class="xiahuaxian flexbetween margin_top" v-for="item in dataAll.cpcs_text">
					<view class="xiaohei ershiba">{{item.title}}</view>
					<view class="ershiba" style="color: #555555;">{{item.intro}}</view>
				</view>
				<view class="bigbtn margin_top5" @click="close">关闭</view>
			</view>
		</u-popup>
		<!-- 保证金规则 -->
		<u-popup :show="bshow" @close="bclose" :round="10" mode="center">
			<view class="mainpadding">
				<view class="sanshier fonweight textcenter xiaohei">保证金规则</view>
				<view class="" style="height: 500rpx; overflow: auto; width: 550rpx;">
					<view class="xiaohei ershiba margin_top">
						<u-parse :content="bzjgz"></u-parse>
					</view>
				</view>
				<view class="bigbtn margin_top5" @click="bclose">关闭</view>
			</view>
		</u-popup>
		<!-- 轮播图 -->
		<!-- goods_status：1=即将开始  2=进行中 3=已结束 -->
		<u-sticky>
			<view class="flexleft"
				v-if="dataAll.goods_status==1 || dataAll.goods_status==2 || dataAll.goods_status==3 ">
				<view class="xhbox textcenter" v-if="dataAll.goods_status==1">未开始</view>
				<view class="xhbox textcenter" v-if="dataAll.goods_status==2">进行中</view>
				<view class="yjsbox textcenter" v-if="dataAll.goods_status==3">已结束</view>
				<view class="dhbox textcenter" v-if="dataAll.goods_status==1">{{dataAll.start_time_text}}开始</view>
				<view class="dhbox textcenter flexcenter" v-if="dataAll.goods_status==2">
					<view class="margin_right0">倒计时</view>
					<view class="margin_right0">
						<u-count-down :time="dataAll.end_time*1000 - Number(new Date())" format="HH:mm:ss"></u-count-down>
					</view>
				</view>
				<view class="yjsdhbox textcenter" v-if="dataAll.goods_status==3">倒计时：00:00:00</view>
			</view>
		</u-sticky>
		<u-swiper :list="listlbt" :autoplay="false" height="375px" radius="0"></u-swiper>
		<!-- 商品内容 -->
		
		<view class="mainpadding ffffff">
			<view class="xiahuaxian">
				<view class="sanshier xiaohei fonweight">{{dataAll.name}}</view>
				<view class="flexbetween margin_top2">
					<view class="strongtext" style="color: #555555;">当前价：
						<text class="strongtext xiaohong fonweight">￥{{dataAll.curr_price}}</text>
					</view>
					<view class="flexright">
						<view class="smalltext xiaohui">已竞拍 </view>
						<view class="smalltext xiaohong">{{dataAll.outprice_num}}</view>
						<view class="smalltext xiaohui">次</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="xuxian margin_top">
				<view class="flexbetween">
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">商品底价：</view>
						<view class="strongtext xiaohei">￥{{dataAll.price}} </view>
					</view>
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">加价幅度：</view>
						<view class="strongtext xiaohei">￥{{dataAll.jj_price}} </view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">保 证 金 ：</view>
						<view class="strongtext xiaohei">￥{{dataAll.bzj_price}} </view>
					</view>
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">独立编码：</view>
						<view class="strongtext xiaohei">{{dataAll.dlno}}</view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">商品成色：</view>
						<view class="strongtext xiaohei">{{dataAll.sbcs}}</view>
					</view>
					<view class="flexleft wushi">
						<view class="strongtext " style="color: #999999;">保卡年份：</view>
						<view class="strongtext xiaohei">{{dataAll.bknf}}</view>
					</view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="flexleft wushi margin_top2" v-for="item in dataAll.cpcs_text">
						<view class="strongtext " style="color: #999999;">{{item.title}}：</view>
						<view class="strongtext xiaohei">{{item.intro}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="xuxian margin_top" @click="show = true" v-if="dataAll.cpcs_text">
				<view class="flexbetween">
					<view class="ershil xiaohei">标签信息</view>
					<view class="flexright">
						<view class="ershil margin_right1" style="color: #555555;">查看</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="xuxian margin_top">
				<view class="flexbetween">
					<view class="ershil xiaohei">配送方式</view>
					<view class="ershil margin_right1" style="color: #555555;">物流到付</view>
				</view>
			</view>
			<view class=" margin_top">
				<view class="flexbetween">
					<view class="ershil xiaohei">拍卖品地址</view>
					<view class="ershil margin_right1" style="color: #555555;">{{dataAll.pwaddress}}</view>
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff margin_top2">
			<view class="flexbetween" @click="jumpdetail('/pages_homepage/jingpaixq?id=',listid)">
				<view class="flexleft">
					<view class="ershiba xiaohui fonweight ">出价记录：</view>
					<view class="ershiba xiaohong fonweight">{{dataAll.outprice_num}}</view>
					<view class="ershiba xiaohei fonweight">次出价</view>
				</view>
				<view class="flexright">
					<view class="ershil margin_right1" style="color: #555555;">全部</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in cj_list" :key="item.id">
					<!-- 已选中 -->
					<view class="yixzbtn dingwei margin_right2 margin_top" v-if="index==0">
						<view class="xzxbtn">当前</view>
						<view class="">
							<view class="flexright">
								<view class="smalltext xiaohei yhxk textright" style="width: 67rpx;">{{item.user.nickname}}</view>
							</view>

							<view class="xiaohuang ershiba fonweight">￥{{item.price}}</view>
						</view>
					</view>
					<!-- 未选中 -->
					<view class="weixbtn dingwei margin_right2 margin_top" v-else>
						<view class="wxxbtn">出局</view>
						<view class="">
							<view class="flexright">
								<view class="smalltext xiaohui yhxk textright" style="width: 67rpx;">{{item.user.nickname}}</view>
							</view>

							<view class="xiaohui ershiba fonweight">￥{{item.price}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mainpadding ffffff margin_top2">
			<view class="dingwei">
				<view class="ershiba xiaohei fonweight ">拍卖流程</view>
				<view class="zitixhx"></view>
			</view>
			<view class="flexbetween margin_top">
				<view class="dingwei flexcenter">
					<view class="dqxuxian"></view>
					<view class="">
						<view class="flexcenter">
							<image class="tubiao" src="../static/image/system/yi.png" mode=""></image>
						</view>
						<view class="smalltext xiaohei margin_top1 ">交保证金</view>
					</view>
				</view>
				<view class="dingwei flexcenter">
					<view class="dqxuxian"></view>
					<view class="">
						<view class="flexcenter">
							<image class="tubiao" src="../static/image/system/er.png" mode=""></image>
						</view>
						<view class="smalltext xiaohei margin_top1 ">出价竞拍</view>
					</view>
				</view>
				<view class="dingwei flexcenter">
					<view class="dqxuxian"></view>
					<view class="">
						<view class="flexcenter">
							<image class="tubiao" src="../static/image/system/san.png" mode=""></image>
						</view>
						<view class="smalltext xiaohei margin_top1 ">竞拍成功</view>
					</view>
				</view>
				<view class="dingwei flexcenter">
					<view class="dqxuxian"></view>
					<view class="">
						<view class="flexcenter">
							<image class="tubiao" src="../static/image/system/si.png" mode=""></image>
						</view>
						<view class="smalltext xiaohei margin_top1 ">付款发货</view>
					</view>
				</view>
				<view class="dingwei flexcenter">
					<view class="">
						<view class="flexcenter">
							<image class="tubiao" src="../static/image/system/wu.png" mode=""></image>
						</view>
						<view class="smalltext xiaohei margin_top1 ">交易成功</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding-bottom: 150rpx;">
			<view class=" ffffff margin_top2">
				<view class="mainpadding">
					<view class="flexbetween">
						<view class="ershil xiaohei">保证金规则</view>
						<view class="flexright" @click="bshow = true">
							<view class="ershil margin_right1" style="color: #555555;">未拍到全额退款</view>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="titletext fonweight xiaohei textcenter margin_top" v-if="dataAll.cjprice">您的出价金额</view>
			<view class="flexbetween margin_top mainpadding ffffff" v-if="dataAll.cjprice">
				<view class="ershil xiaohei">金额 (元)：</view>
				<view class="sanshier fonweight xiaohong">{{dataAll.cjprice}}</view>
			</view>
		</view>
		
		<view class="gudingdb ">
			<!-- 当前活动未开始 -->
			<view class="bighbtn" style="background-color: #999999;color: #fff;" v-if="dataAll.goods_status==1">当前活动未开始</view>
			<!-- 活动开始出价中 -->
			<view class="flexleft" style="margin-bottom: 20rpx;" v-if="Number(dataAll.xb_bzj_price)>0 && dataAll.goods_status==2">
				<view class="xhbtn flexcenter" style="border-radius: 0;">
					<view class="">
						<view class="titletext xiaobai fonweight textcenter">保证金￥{{dataAll.xb_bzj_price}}</view>
						<view class="strongtext xiaobai textcenter">（请提前确认网银支付限额）</view>
					</view>
				</view>
				<view class="xhhbtn flexcenter" style="border-radius: 0;" @click="jumpdetail('/pages_homepage/baozhenjjn?price=',dataAll.xb_bzj_price)">
					<view class="titletext xiaobai fonweight">交保证金报名</view>
				</view>
			</view>
			<view class="mainpadding" v-if="(Number(dataAll.xb_bzj_price)==0 && dataAll.goods_status==2) || dataAll.goods_status==3">
				<view class="xhhbtn flexcenter" style="width: 100%;"
					v-if="Number(dataAll.xb_bzj_price)==0 && dataAll.goods_status==2" @click="cjshow=true">
					<view class="titletext xiaobai fonweight">{{dataAll.cjprice?"重新出价":returntext(dataAll.add_status)}}</view>
				</view>
				<!-- 出价已结束 -->
				<!-- dataAll.usergoodsprice.status状态:1=未出局,2=已出局,3=成功 -->
				<view class="bighbtn" style="background-color: #999999;color: #fff;"  v-if="dataAll.goods_status==3">
					出价已结束</view>
				<!-- <view class="bighbtn"
					v-if="(dataAll.goods_status==3 && !dataAll.usergoodsprice) || (dataAll.goods_status==3 && dataAll.usergoodsprice.status==2)">
					出价已结束</view>
				<view class="xhhbtn flexcenter" style="width: 100%;"
					v-if="dataAll.goods_status==3&& dataAll.usergoodsprice && dataAll.usergoodsprice.status==3">
					<view class="titletext xiaobai fonweight" @click="tzqrdd()">确认订单</view>
				</view> -->
			</view>
		</view>

		<!-- 出价 -->
		<u-popup :show="cjshow" @close="cjshow=false" :round="10">
			<view class="ffffff mainpadding">
				<view class="titletext fonweight xiaohei textcenter">您的出价金额</view>
				<view class="flexleft margin_top">
					<image style="min-width: 140rpx;width: 140rpx;height: 88rpx;" src="../static/image/system/jian.png"
						mode="" @click="changechujia(1)"></image>
					<view class="jjqbox flexbetween" style="width: 100%;">
						<view class="ershil xiaohei" style="min-width: 160rpx;">金额 (元)：</view>
						<view class="sanshier fonweight xiaohong"  v-if="dataAll.add_status==2">{{chujia}}</view>
						<input type="number" v-model="chujia" v-if="dataAll.add_status==1" class="sanshier textright fonweight xiaohong"/>
					</view>
					<image style="min-width: 140rpx;width: 140rpx;height: 88rpx;" src="../static/image/system/jia.png"
						mode="" @click="changechujia(2)"></image>
				</view>
				<view class="bigbtn margin_top4" @click="chujiaApi()">立即出价</view>
			</view>
		</u-popup>
		<u-popup :show="cjcgshow" @close="cjcgshow=false" :round="10" mode="center">
			<view class="mainpadding" style="width: 520rpx;">
				<view class="flexcenter margin_top">
					<image style="width: 186rpx;height: 197rpx;" src="../static/image/system/cjcg.png" mode=""></image>
				</view>
				<view class="sanshier fonweight xiaohei textcenter margin_top">出价成功</view>
				<view class="ershiba xiaohui textcenter margin_top">请您耐心等待相关信息</view>
				<view class="bigbtn margin_top5" @click="cjcgshow=false">知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false, //标签信息
				bshow: false, //保证金规则
				listid: "",
				dataAll: {},
				cj_list: [],
				userInfo: {},
				cjshow: false,
				chujia: "",
				chujiat: "",
				bzjgz: "",
				cjcgshow: false,
				listlbt:[],
				ahhaha:"",
				pageShow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.list()
			this.getsystem()
		},
		onShow() {
			this.getdetail()
			this.getinfo()
		},
		methods: {
			returntext(val){
				if(val==1){
					return "我要出价竞拍"
				}else{
					return "我要加价竞拍"
				}
			},
			getsystem() {
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "about_set",
					type: "bzjgz",
				}).then(res => {
					this.bzjgz = res.data
				})
			},
			// 跳转确认订单
			tzqrdd() {
				uni.navigateTo({
					url: '/pages_paimai/querendd?id=' + this.listid
				})
			},
			changechujia(val) {
				if (val == 1) {
					if (Number(this.chujiat) == Number(this.chujia)) {
						httpRequest.toast("已经最低了")
						return false
					}
					if(this.dataAll.add_status==1){//出价模式
						this.chujia = Number(this.chujia) - 1
					}else{//加价模式
						this.chujia = Number(this.chujia) - Number(this.dataAll.jj_price)
					}
				} else {
					if(this.dataAll.add_status==1){//出价模式
						this.chujia = Number(this.chujia) + 1
					}else{//加价模式
						this.chujia = Number(this.chujia) + Number(this.dataAll.jj_price)
					}
				}
			},
			chujiaApi() {
				if (Number(this.chujiat) >= Number(this.chujia)) {
					httpRequest.toast("出价金额不能低于最低价")
					return false
				}
				httpRequest.request('/api/goodscl/goodsPriceOut', 'GET', {
					id: this.listid,
					price: this.chujia
				}).then(res => {
					if (res.code == 1) {
						this.cjshow = false
						this.cjcgshow = true
						this.getdetail()
						this.list()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			getinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else {
						this.userInfo = null
					}
				})
			},
			getdetail() {
				httpRequest.request('/api/goodscl/goodsDetail', 'GET', {
					id: this.listid
				}).then(res => {
					this.listlbt = res.data.images_text
					this.listlbt.unshift(res.data.video_url_text)
					this.dataAll = res.data
					this.chujia = Number(this.dataAll.curr_price) + Number(this.dataAll.jj_price)
					this.chujiat = Number(this.dataAll.curr_price) + Number(this.dataAll.jj_price)
					this.pageShow = true
				})
			},
			list() {
				httpRequest.request('/api/goodscl/goodsPriceIndex', 'GET', {
					page: 1,
					limit: 12,
					id: this.listid
				}).then(res => {
					this.cj_list = res.data.data
				})
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			close() {
				this.show = false
			},
			bclose() {
				this.bshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-count-down__text{
		color: #fff !important;
		font-size: 28rpx !important;
		line-height: 30rpx !important;
	}
	.jjqbox {
		height: 85rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx;
		border-top: 1rpx solid #DDDDDD;
		border-bottom: 1rpx solid #DDDDDD;
	}

	.xhhbtn {
		height: 100rpx;
		width: 60%;
		background: #BA9549;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.xhbtn {
		height: 100rpx;
		width: 60%;
		background: #252525;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.wxxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48rpx;
		height: 30rpx;
		background: #999999;
		border-radius: 6rpx 0rpx 6rpx 0rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
	}

	.xzxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48rpx;
		height: 30rpx;
		background: #DB2E2E;
		border-radius: 6rpx 0rpx 6rpx 0rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
	}

	.weixbtn {
		background: #f8f8f8;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 12rpx;
	}

	.yixzbtn {
		background: #F8F4ED;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid #BA9549;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 12rpx;
	}

	.dqxuxian {
		position: absolute;
		top: 22rpx;
		right: -82rpx;
		width: 90rpx;
		height: 0rpx;
		border-bottom: 1rpx dashed #999999;
	}

	.tubiao {
		width: 50rpx;
		height: 50rpx;
		margin: auto;
	}

	.dhbox {
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 17rpx 0;
		background: #252525;
		width: 70%;
	}
	

	.xhbox {
		font-weight: 700;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 17rpx 0;
		background: #BA9549;
		width: 30%;
	}

	.yjsbox {
		font-weight: 700;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 17rpx 0;
		background: #767676;
		width: 30%;
	}

	.yjsdhbox {
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 17rpx 0;
		background: #a3a3a3;
		width: 70%;
	}
</style>